<template>
  <div class="main">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <img
      class="banner"
      :src="banner"
      alt=""
    >
    <div class="form-wrap p-rel">
			<div class="title font-bold titleline">
				<p>ARcoin 点卡全新上线</p>
				<p>即买即享手续费套餐优惠，AR币 限时送</p>
			</div>
      <!-- <div class="right_pos">
        <el-button type="danger" icon="el-icon-document" @click="navigateTo('/Startup/startipList')">我的参与记录</el-button>	
      </div> -->
      <div class="form min_h1000">
					<div class="main_cont">
						<ul v-if="listData.length>0">
							<li class="flex flex-between" v-for="(item,index) in listData" :key="index">
								<div class="tc_left" :data-id="item.autoid">
									<p>{{Number(item.point)}}点套餐</p>
									<h3> <span class="font-40 font-bit-bold color-primary">{{Number(item.point)}}点 </span> <span class="tcred m-right-10">限时赠送{{Number(item.coinnumber)}} {{coinName}} </span></h3>
									<p>可抵扣等值手续费 {{Number(item.point)}} USDT</p>
								</div>
								<div class="tc_right">
									<h3><span class="m-right-10">售价  </span> <span class="font-20 font-bold ">{{Number(item.usdt)}} </span> <span class="m-right-10">USDT</span></h3>
									<p>接受 USDT,BTC,ETH,BNB,HT 支付</p>
									<el-button type="danger" @click="showLockProp">点击购买</el-button>
								</div>
							</li>
						</ul>
						<!-- 暂无数据 -->
						<div  v-else  class="table-no-data txt-center font-20"  v-text="$t('label108')">	</div>
					</div>
              
					<!-- 点卡规则 -->
					<div class="cont_rule">
						<div>
							<h3>活动规则说明：</h3>
							<p>Arcoin将利用在行业中的优势地位和强大影响力，深度推行AR生态，包括但不限于以下措施：</p>
							<p>1. AR将作为Arcoin的网络主币种，支撑Arcoin的基础设施，支付网络转账手续费</p>
							<p>2. Arcoin将为Ar作为主网资产上线全球主流交易平台提供技术和资金支持</p>
							<p>3. 美国，加拿大，日本和其他限制注册国家的用户不能参加本次点卡认购</p>
						</div>
					</div>
      </div>
      
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import axios from "axios";
import CountDown from 'vue2-countdown'
export default {
  data() {
    return {
      banner: require("@/assets/images/shangbi/point11.png"),
			canSubmit: true,
      activeName: '0',
      StartAllData:[],
      countdownTime:'',
			listData:[],
			userData: this.userModel,
			coinName:'AR'
    };
  },
  watch:{
    
  },
  computed: {
    
  },
  components: {
    CountDown
  },
  mounted() {
    this.getpointlist();
    // this.getlockincomebill();
  },
  methods: {
    // 查看点卡购买方案
    getpointlist(){
      this.request(this.api.getpointlist).then(res => {
        try {
          this.listData = res.data.result;
        } catch (err) {}
      })
    },
    // 查看支持的币种

    showLockProp(){
      if (!this.userData.isLogin) {
				this.errMsg("label120" || "请登录后操作");
				this.navigateTo("/user/login");
        return
      }else{
				this.navigateTo("/my/arTimeBuy");
        this.prorpForm=true;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
}
.form-wrap,
.requirement {
  @include hCenter;
  width: 1200px;
  padding: 25px 0;
  border: $default-border;
  border-radius: 4px;
  background: $bg-white;
}
.requirement {
  margin-top: 25px;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
  dl {
    margin-top: 32px;
    dt {
      font-size: $font-large;
      color: $color-danger;
      margin-bottom: 10px;
    }
    dd {
      line-height: 1.8;
    }
  }
}
.form-wrap {
  margin-top: -100px;
  .title {
    text-align: center;
    font-size: $font-middile;
    width: 750px;
    margin: 0 auto;
    text-align: justify;
  }
  .form {
    padding: 0 25px;
    margin-top: 30px;
    button {
			margin-top: 15px;
			width: 200px;
    }
  }
}
// super 币种设置
.ma20{margin: 20px 0;}
.min_h1000{min-height: 1000px;}
.line_16{line-height: 16px;height: 32px;}
.tcred{color: $txt-red}
.main_cont{
	li{border: 1px solid #f4f4f4;margin-bottom: 15px;padding: 10px;border-radius: 4px;}
	.tc_left{
		p{color:$txt-hui;line-height: 40px; }
	}
}
.tc_right{
	p{margin-top: 15px;}
}
// 规则说明
.cont_rule{
	h3{font-size: 20px;line-height: 32px;}
	p{line-height: 22px;}
}
.titleline{line-height: 30px;color: $txt-red;}
</style>